import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:lazy_food/util/string+.dart';
import '../keepAliveWrapper/keep_alive_arapper.dart';

class GroupModel {
  String imgUrl;
  String title;
  GroupModel(this.imgUrl, this.title);
}

class GroupView extends StatefulWidget {
  final List<GroupModel> list;
  final String title;

  GroupView({Key? key, required this.list, required this.title})
      : super(key: key);

  _GroupViewState createState() => _GroupViewState();
}

class _GroupViewState extends State<GroupView> {
  @override
  Widget build(BuildContext context) {
    int itemCount = widget.list.length;
    return Container(
      height: 295,
      width: MediaQuery.of(context).size.width,
      child: itemCount > 0
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  padding: EdgeInsets.only(left: 20, right: 20),
                  child: Text(
                    widget.title,
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Expanded(
                  child: KeepAliveWrapper(
                    child: ScrollConfiguration(
                      behavior: ScrollConfiguration.of(context)
                          .copyWith(scrollbars: false),
                      child: ListView.separated(
                        padding: EdgeInsets.only(left: 20, right: 20),
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          GroupModel group = widget.list[index];
                          double rightPadding = index == itemCount - 1 ? 0 : 20;
                          return Container(
                            width: 150,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(10),
                                  child: CachedNetworkImage(
                                    imageUrl: group.imgUrl,
                                    width: 150,
                                    height: 200,
                                    fit: BoxFit.cover,
                                    placeholder: (context, s) {
                                      return Image.asset(
                                          'assets/images/placeholder.png');
                                    },
                                  ),
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                                Text(
                                  group.title,
                                  softWrap: true,
                                  maxLines: 2,
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 16),
                                ),
                              ],
                            ),
                          );
                        },
                        separatorBuilder: (context, index) {
                          return VerticalDivider(
                            width: 20,
                            color: Colors.transparent,
                          );
                        },
                        itemCount: itemCount,
                      ),
                    ),
                  ),
                ),
              ],
            )
          : Container(),
    );
  }
}
